<template>
  <div class="main">
    <PureTableBar style="height:50%" title="客群筛选">
      <template #buttons>
        <el-button type="primary" @click="createTaskVisible = true"> 新增客群筛选任务 </el-button>
      </template>
      <template v-slot="{ size }">
        <pure-table border align-whole="center" showOverflowTooltip table-layout="auto" :loading="loading" size="small"
          :data="dataList" :columns="columns" :pagination="pagination" @current-change="handleCurrentChange"
          max-height="350px" @size-change="handleSizeChange" :header-cell-style="{
            background: 'var(--el-table-row-hover-bg-color)',
            color: 'var(--el-text-color-primary)'
          }">
          <template #operation="{ row }">
            <el-button type='primary' text @click="checkPor(row)">
              查看客群
            </el-button>
          </template>
        </pure-table>
      </template>
    </PureTableBar>
    <PureTableBar title="客户信息" style="height:45%">
      <template v-slot="{ size, checkList }">
        <pure-table border align-whole="center" showOverflowTooltip table-layout="auto" :loading="loading" size="small"
          :data="dataList2" :columns="columns2" :pagination="pagination2" @current-change="handleCurrentChange2"
          max-height="300px" @size-change="handleSizeChange2" :header-cell-style="{
            background: 'var(--el-table-row-hover-bg-color)',
            color: 'var(--el-text-color-primary)'
          }">
        </pure-table>
      </template>
    </PureTableBar>
    <!-- 创建任务弹窗 -->
    <ReDialog :width="1000" :height="500" :models="createTaskVisible" @Closes="createTaskVisible = false">
      <template #header>
        <h2 style="text-align: center;">新增客群筛选</h2>
      </template>
      <template #main>
        <el-scrollbar height="440px">
          <el-form label-position="right" style="width: 80%; margin: 0 auto" label-width="100" :model="formData">
            <el-form-item label="客群名称：" prop="customerName">
              <el-input v-model.trim="formData.customerName" style="width: 70%" />
            </el-form-item>
            <div style="width: 100%;padding:0 3%">
              <ScreenPerson v-if="createTaskVisible" />
            </div>
          </el-form>
        </el-scrollbar>
      </template>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="saveCreate()" type="primary" :loading="BtnLoading"> 保存 </el-button>
          <el-button @click="createTaskVisible = false"> 取消 </el-button>
        </span>
      </template>
    </ReDialog>

  </div>
</template>
<script setup lang='ts'>
import { usePortrait } from "./hook/customerScreening";
import { PureTableBar } from "@/components/RePureTableBar";
import ScreenPerson from "@/components/Screen-banktwo/index.vue"
import { ref } from "vue";
const ruleFormRef = ref();
const {
  columns,
  loading,
  dataList,
  dataList2,
  pagination,
  pagination2,
  columns2,
  createTaskVisible,
  formData,
  handleSizeChange,
  handleCurrentChange,
  handleSizeChange2,
  handleCurrentChange2,
  checkPor,
  saveCreate,
  BtnLoading
} = usePortrait()
</script>

<style lang="scss" scoped>
@import url(@/style/CreditComm.scss);
</style>
